<template>
    <a-layout class="permissionManageRoot">

        <a-layout-content style="display: flex;flex-direction: column;height: 100%">

            <!--<div style="background: #fff;margin-top: 1px;padding-left: 18px;padding-right: 18px; height: 50px;display: flex;align-items: center">-->
            <!--<h2 style="flex: 1">权限管理</h2>-->
            <!--<a-button type="primary" v-has-button-permission="'permission:add'" @click="()=>{curEditPermission={permission:{permissionId:'ROOT',permissionType:''}};addVisible=true}">添加根权限</a-button>-->
            <!--</div>-->

            <PageHeader>

                <a-radio-group v-model="showApi" @change="toggleApiVisible" buttonStyle="solid" style="margin-right: 20px">

                    <a-radio-button :value="true">
                        显示API接口
                    </a-radio-button>
                    <a-radio-button :value="false">
                        隐藏API接口
                    </a-radio-button>

                </a-radio-group>

                <a-button type="primary" v-has-permission="'permission:add'"
                          @click="()=>{curEditPermission={permission:{permissionId:'ROOT',permissionType:''}};addVisible=true}">
                    添加根权限
                </a-button>
            </PageHeader>

            <div ref="tableWrapper" style="flex: 1;overflow-y: auto">

                <a-table
                        :scroll="{ y : (this.$refs.tableWrapper ? this.$refs.tableWrapper.offsetHeight - 120:0  ) }"
                        :pagination="false"
                        :rowKey="(record) => {return record.permission.permissionId}"

                        :columns="columns" :dataSource="tableData">

                    <span slot="permissionType" slot-scope="text, record" >
                        <a-tag color="#2db7f5" v-if="text == 'BUTTON' || text == 'ACTION' ">API接口</a-tag>

                        <a-tag color="#87d068" v-if="text == 'FUNCTION' ">功能组件</a-tag>

                        <a-tag color="#f50" v-if="text == 'MENU' ">菜单</a-tag>
                    </span>



                    <span  v-if="record.permission.permissionType != 'ACTION' && record.permission.permissionType != 'BUTTON'"   slot="permissionVisible" slot-scope="text, record" >
                        <a-tag color="green" v-if="text == true" @click="toggleVisible(record)" >已显示</a-tag>

                        <a-tag color="gray" v-if="text == false" @click="toggleVisible(record)">已隐藏</a-tag>

                    </span>

                    <span v-if="record.permission.permissionType == 'ACTION' " slot="permissionIgnore" slot-scope="text, record" >

                        <a-tag color="green" v-if="text == false" @click="toggleAuth(record)" >需要</a-tag>

                        <a-tag color="gray" v-if="text == true" @click="toggleAuth(record)">不需要</a-tag>

                    </span>

                    <span slot="permissionId" slot-scope="text, record" class="oper">


                    <a-icon type="edit" title="编辑" v-has-permission="'permission:edit'"
                            @click="()=>{editVisible = true;curPermissionId=record.permission.permissionId}"/>

                    <a-popconfirm title="确认删除此菜单/功能吗" v-has-permission="'permission:delete'"
                                  @confirm="deletePermission(text)" okText="确认" cancelText="取消">
                        <a-icon theme="twoTone" twoToneColor="#f50" type="delete" title="删除"/>
                    </a-popconfirm>

                    <a-icon type="plus"
                            v-if="record.permission.permissionType === 'MENU' || record.permission.permissionType === 'FUNCTION' "
                            v-has-permission="'permission:add'"
                            @click="()=>{addVisible = true;curEditPermission=record}"/>


                </span>

                </a-table>

            </div>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="添加权限"
                    @close="addVisible=false"
                    :visible="addVisible"
            >
                <PermissionAdd
                        v-model="curEditPermission"
                        ref="addPer"
                        @ok="()=>{this.addVisible =false;this.loadPermissions()}"></PermissionAdd>

                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.addPer.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="修改权限"
                    @close="editVisible=false"
                    :visible="editVisible">

                <PermissionEdit
                        v-model="curPermissionId"
                        ref="editPer"
                        @ok="()=>{this.editVisible =false;this.loadPermissions()}"></PermissionEdit>

                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.editPer.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


        </a-layout-content>


    </a-layout>


</template>

<script>


    import _ from 'lodash'
    import PermissionAdd from './PermissionAdd';
    import PermissionEdit from './PermissionEdit'
    import {
        Layout,
        Form, DatePicker, Input, Button, Icon, Radio, TreeSelect,
        Pagination,
        Popconfirm,
        Table,
        Drawer,
        Tag, message,
        Switch

    } from 'ant-design-vue';

    export default {
        name: "PermissionManage",
        components: {
            ATag: Tag,
            PermissionAdd,
            PermissionEdit,
            ALayout: Layout,
            ALayoutSider: Layout.Sider,
            ALayoutContent: Layout.Content,
            ALayoutHeader: Layout.Header,
            APagination: Pagination,
            ARadioButton: Radio.Button,
            ARadioGroup: Radio.Group,
            AFormItem: Form.Item,
            AForm: Form,
            ADatePicker: DatePicker,
            AInput: Input,
            AButton: Button,
            AIcon: Icon,
            ATreeSelect: TreeSelect,
            APopconfirm: Popconfirm,
            ATable: Table,
            ADrawer: Drawer,
            ASwitch:Switch
        },
        data() {
            return {
                addVisible: false,
                editVisible: false,
                permissionVisible: false,
                curEditPermission: {},
                curPermissionId: '',
                showApi:false,
                routes: [],
                columns: [{
                    title: '权限名称',
                    dataIndex: 'permission.permissionName',
                    width: '20%'
                },
                    {
                        title: '权限描述',
                        dataIndex: 'permission.permissionDesc',
                        width: '10%'
                    },
                    {
                        title: '权限类型',
                        dataIndex: 'permission.permissionType',
                        width: '5%',
                        scopedSlots: {customRender: 'permissionType'}
                    },
                    {
                        title: '权限路径/接口地址',
                        dataIndex: 'permission.permissionUrl',
                        width: '20%'
                    },
                    {
                        title: '权限关键字',
                        dataIndex: 'permission.permissionKey',
                        width: '10%'
                    },
                    {
                        title: '显隐状态',
                        dataIndex: 'permission.permissionVisible',
                        width: '5%',
                        scopedSlots: {customRender: 'permissionVisible'}
                    },
                    {
                        title: '需要授权',
                        dataIndex: 'permission.permissionIgnore',
                        width: '5%',
                        scopedSlots: {customRender: 'permissionIgnore'}
                    },
                    {
                        title: '排序',
                        dataIndex: 'permission.permissionOid',
                        width: '5%'
                    },
                    {
                        title: '操作',
                        width: '15%',
                        dataIndex: 'permission.permissionId',
                        scopedSlots: {customRender: 'permissionId'}
                    }
                ],
                tableData: [],
                rawData:[]
            };
        },
        mounted() {
            this.loadPermissions();
        },
        methods: {

            toggleApiVisible(){

                this.processData();
            },
            processData(){

                this.tableData = this.processEmptyChild(this.rawData);
            },

            loadPermissions() {
                this.$axios.get("/auth/permission/getPermissionTree")
                    .then(d => {
                        if (d.data.status == 0) {


                            this.rawData = d.data.data;
                            this.processData();

                        }

                    })
                    .catch(e => {

                    })
            },
            processEmptyChild(data) {

                let newData = [];

                //把空的children去掉，前端框架有bug 没办法
                for (let d of data) {

                    if(d){

                        if(!this.showApi){
                            if(d.permission.permissionType === 'ACTION' || d.permission.permissionType === 'BUTTON' ){

                                continue;
                            }
                        }

                        let nd = {permission:d.permission};

                        if (d.children.length > 0) {
                            nd.children = this.processEmptyChild(d.children);
                        }
                        newData.push(nd);
                    }
                }

                if(newData.length > 0){

                    return newData;
                }else{
                    return undefined;
                }
            },

            toggleVisible(record){
                this.$axios.put("/auth/permission/toggleVisible?permissionId=" + record.permission.permissionId)
                    .then(d=>{

                        if(d.data.status == 0){
                            record.permission.permissionVisible =  !record.permission.permissionVisible;

                            message.success("切换成功");
                        }else{
                            message.error("切换失败");
                        }
                    },e=>{
                        message.error("切换失败" + e.message);
                    });

            },

            toggleAuth(record){
                this.$axios.put("/auth/permission/toggleAuth?permissionId=" + record.permission.permissionId)
                    .then(d=>{

                        if(d.data.status == 0){
                            record.permission.permissionIgnore=  !record.permission.permissionIgnore;

                            message.success("切换成功");
                        }else{
                            message.error("切换失败");
                        }
                    },e=>{
                        message.error("切换失败" + e.message);
                    });

            },

            deletePermission(pid) {

                this.$axios.delete("/auth/permission/deletePermission?permissionId=" + pid)
                    .then(d => {
                        if (d.data.status == 0) {
                            message.success("删除成功");
                            this.loadPermissions();
                        } else {
                            message.error(d.data.message);
                        }
                    })
                    .catch(e => {
                        message.error("删除失败,未知错误");
                    })
            }

        }
    }
</script>

<style scoped>
    .permissionManageRoot {

        height: 100%;
    }

    .oper >>> .anticon {

        margin-right: 16px;
        font-size: 20px;
        cursor: pointer;
    }

    >>> .ant-table-header {
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
        overflow: hidden !important;
    }

    >>> .ant-table-body {
        overflow-y: auto !important;
    }

    .drawerBottomWrapper {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 4px 4px;
    }


</style>